import { ref, onMounted, onUnmounted } from 'vue';

export function useScreenSize() {
    const isSmallScreen = ref(window.innerWidth < 650);
    const isSmallNav = ref(window.innerWidth < 1050)

    const updateScreenSize = () => {
        isSmallScreen.value = window.innerWidth < 650;
        isSmallNav.value = window.innerWidth < 1050
    };

    onMounted(() => {
        window.addEventListener('resize', updateScreenSize);
    });

    onUnmounted(() => {
        window.removeEventListener('resize', updateScreenSize);
    });

    return { isSmallScreen, isSmallNav };
}